import React from 'react'
import { Form, Upload, Select, Col, Row, Radio, message, Icon, Avatar, Card, Badge, Calendar, Tabs, Alert,Tag } from 'antd';
import moment from 'moment';
import QueueAnim from 'rc-queue-anim';
import Animate from 'rc-animate';
import Texty from 'rc-texty';
import TweenOne from 'rc-tween-one';
import PropTypes from 'prop-types';
import Autoset from './components/autoset'

const { Group, Button: RadioButton } = Radio;
const { TabPane } = Tabs;

function callback(key) { console.log(key) }
function getListData(value) {
  let listData;
  switch (value.date()) {
    case 8:
      listData = [
        { type: 'warning', content: 'This is warning' },
        { type: 'success', content: 'This is usual' },
      ];
      break;
    case 10:
      listData = [
        { type: 'warning', content: 'This is warning' },
        { type: 'success', content: 'This is usual' },
        { type: 'error', content: 'This is error' },
      ];
      break;
    case 15:
      listData = [
        { type: 'warning', content: 'This is warning event' },
        { type: 'success', content: 'This is very long ....' },
        { type: 'error', content: 'This is error 1' },
        { type: 'error', content: 'This is error 2' },
        { type: 'error', content: 'This is error 3' },
        { type: 'error', content: 'This is error 4' },
      ];
      break;
    default:
  }
  return listData || [];
}

function dateCellRender(value) {
  const listData = getListData(value);
  return (
    <ul className="events">
      {listData.map(item => (
        <li key={item.content}>
          <Badge status={item.type} text={item.content} />
        </li>
      ))}
    </ul>
  );
}

function getMonthData(value) {
  if (value.month() === 8) {
    return 1394;
  }
}

function monthCellRender(value) {
  const num = getMonthData(value);
  return num ? (
    <div className="notes-month">
      <section>{num}</section>
      <span>Backlog number</span>
    </div>
  ) : null;
}


export default class Test extends React.Component {
  state = {
    value: moment('2017-01-25'),
    selectedValue: moment('2017-01-25'),
  }

  render() {
    return (
      <>
        <style>
          {`
          .card-container > .ant-tabs-card > .ant-tabs-content {
            height: 120px;
            margin-top: -16px;
          }
          
          .card-container > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane {
            background: #fff;
            padding: 16px;
          }
          
          .card-container > .ant-tabs-card > .ant-tabs-bar {
            border-color: #fff;
          }
          
          .card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
            border-color: transparent;
            background: transparent;
          }
          
          .card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
            border-color: #fff;
            background: #fff;
          }
        `}
        </style>
        <Tabs type="card" defaultActiveKey="1" onChange={callback}>
          <TabPane tab="基本" key="2">
            <Card title="一个通用的日历面板，支持年/月切换" extra={<a href="#">More</a>}  >
              <Calendar onPanelChange={(value, mode) => console.log(value, mode)} />
            </Card>
          </TabPane>
          <TabPane tab="通知事项日历" key="3">
            <Card title="一个复杂的应用示例，用 dateCellRender 和 monthCellRender 函数来自定义需要渲染的数据" extra={<a href="#">More</a>} >
              <Calendar dateCellRender={dateCellRender} monthCellRender={monthCellRender} />
            </Card>
          </TabPane>

          <TabPane tab="卡片模式" key="4">
            <Card title="用于嵌套在空间有限的容器中" extra={<a href="#">More</a>} >
              <Calendar fullscreen={false} onPanelChange={(value, mode) => console.log(value, mode)} />
            </Card>
          </TabPane>

          <TabPane tab="选择功能" key="5">
            <Card title="一个通用的日历面板，支持年/月切换" extra={<a href="#">More</a>} >
              <Alert message={`You selected date: ${this.state.selectedValue && this.state.selectedValue.format('YYYY-MM-DD')}`} />
              <Calendar value={this.state.value} onSelect={value => this.setState({ value, selectedValue: value })}
                onPanelChange={value => this.setState({ value })} />
            </Card>
          </TabPane>









          <TabPane tab="自定义头部" key="1">
            <Card title="自定义日历头部内容" extra={<a href="#">More</a>} >

              <div style={{ width: 300, border: '1px solid #d9d9d9', borderRadius: 4 }}>
                <Calendar
                  fullscreen={false}
                  headerRender={({ value, type, onChange, onTypeChange }) => {


                    const current = value.clone();
                    const localeData = value.localeData();



                    //月份
                    const start = 0;
                    const end = 12;
                    const monthOptions = [];
                    const months = [];
                    for (let i = 0; i < 12; i++) {
                      current.month(i);
                      months.push(localeData.monthsShort(current));
                    }
                    for (let index = start; index < end; index++) {
                      monthOptions.push(
                        <Select.Option className="month-item" key={`${index}`}>
                          {months[index]}
                        </Select.Option>,
                      );
                    }
                    const month = value.month();

                    //年份
                    const year = value.year();
                    const options = [];
                    for (let i = year - 100; i < year + 100; i += 1) {
                      options.push(<Select.Option key={i} value={i} className="year-item"> {i} </Select.Option>);
                    }


                    return (
                      <div style={{ padding: 10 }}>
                        <div style={{ marginBottom: '10px' }}><Tag><Badge status='success'/>自定义日历</Tag> </div>
                        <Row type="flex" justify="space-between">
                          <Col>
                            <Group size="small" onChange={e => onTypeChange(e.target.value)} value={type}>
                              <RadioButton value="month">Month</RadioButton>
                              <RadioButton value="year">Year</RadioButton>
                            </Group>
                          </Col>
                          <Col>
                            <Select
                              size="small"
                              dropdownMatchSelectWidth={false}
                              className="my-year-select"
                              onChange={newYear => {
                                const now = value.clone().year(newYear);
                                onChange(now);
                              }}
                              value={String(year)}
                            >
                              {options}
                            </Select>
                          </Col>
                          <Col>
                            <Select
                              size="small"
                              dropdownMatchSelectWidth={false}
                              value={String(month)}
                              onChange={selectedMonth => {
                                const newValue = value.clone();
                                newValue.month(parseInt(selectedMonth, 10));
                                onChange(newValue);
                              }}
                            >
                              {monthOptions}
                            </Select>
                          </Col>
                        </Row>
                      </div>
                    );
                  }}
                  onPanelChange={(value, mode) => console.log(value, mode)}
                />
              </div>

            </Card>
          </TabPane>


        </Tabs>






      </>
    );
  }
};

